<template>
	<view class="data-export-container">
		<!-- 页面标题 -->
		<view class="page-header">
			<text class="title">数据导出</text>
		</view>
		
		<!-- 导出选项 -->
		<view class="export-options">
			<!-- 数据类型选择 -->
			<view class="option-group">
				<view class="group-title">选择数据类型</view>
				
				<view class="option-list">
					<view class="option-item" @tap="toggleDataType('bloodSugar')">
						<view class="checkbox" :class="{ checked: exportOptions.dataTypes.includes('bloodSugar') }"></view>
						<text class="option-label">血糖数据</text>
					</view>
					
					<view class="option-item" @tap="toggleDataType('diet')">
						<view class="checkbox" :class="{ checked: exportOptions.dataTypes.includes('diet') }"></view>
						<text class="option-label">饮食数据</text>
					</view>
					
					<view class="option-item" @tap="toggleDataType('medicine')">
						<view class="checkbox" :class="{ checked: exportOptions.dataTypes.includes('medicine') }"></view>
						<text class="option-label">用药数据</text>
					</view>
					
					<view class="option-item" @tap="toggleDataType('reminder')">
						<view class="checkbox" :class="{ checked: exportOptions.dataTypes.includes('reminder') }"></view>
						<text class="option-label">提醒设置</text>
					</view>
				</view>
			</view>
			
			<!-- 时间范围选择 -->
			<view class="option-group">
				<view class="group-title">选择时间范围</view>
				
				<view class="option-list">
					<view class="option-item" @tap="setDateRange('week')">
						<view class="radio" :class="{ checked: exportOptions.dateRange === 'week' }"></view>
						<text class="option-label">最近一周</text>
					</view>
					
					<view class="option-item" @tap="setDateRange('month')">
						<view class="radio" :class="{ checked: exportOptions.dateRange === 'month' }"></view>
						<text class="option-label">最近一个月</text>
					</view>
					
					<view class="option-item" @tap="setDateRange('quarter')">
						<view class="radio" :class="{ checked: exportOptions.dateRange === 'quarter' }"></view>
						<text class="option-label">最近三个月</text>
					</view>
					
					<view class="option-item" @tap="setDateRange('year')">
						<view class="radio" :class="{ checked: exportOptions.dateRange === 'year' }"></view>
						<text class="option-label">最近一年</text>
					</view>
					
					<view class="option-item" @tap="setDateRange('custom')">
						<view class="radio" :class="{ checked: exportOptions.dateRange === 'custom' }"></view>
						<text class="option-label">自定义时间范围</text>
					</view>
				</view>
				
				<!-- 自定义时间范围 -->
				<view class="custom-date-range" v-if="exportOptions.dateRange === 'custom'">
					<view class="date-picker">
						<text class="date-label">开始日期</text>
						<picker mode="date" :value="exportOptions.startDate" @change="setStartDate" class="picker">
							<view class="picker-value">{{ exportOptions.startDate }}</view>
						</picker>
					</view>
					
					<view class="date-picker">
						<text class="date-label">结束日期</text>
						<picker mode="date" :value="exportOptions.endDate" @change="setEndDate" class="picker">
							<view class="picker-value">{{ exportOptions.endDate }}</view>
						</picker>
					</view>
				</view>
			</view>
			
			<!-- 导出格式选择 -->
			<view class="option-group">
				<view class="group-title">选择导出格式</view>
				
				<view class="option-list">
					<view class="option-item" @tap="setExportFormat('excel')">
						<view class="radio" :class="{ checked: exportOptions.format === 'excel' }"></view>
						<text class="option-label">Excel表格</text>
					</view>
					
					<view class="option-item" @tap="setExportFormat('csv')">
						<view class="radio" :class="{ checked: exportOptions.format === 'csv' }"></view>
						<text class="option-label">CSV文件</text>
					</view>
					
					<view class="option-item" @tap="setExportFormat('pdf')">
						<view class="radio" :class="{ checked: exportOptions.format === 'pdf' }"></view>
						<text class="option-label">PDF文档</text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 导出按钮 -->
		<view class="export-actions">
			<button class="btn-cancel" @tap="goBack">取消</button>
			<button class="btn-export" :disabled="!canExport" @tap="exportData">导出数据</button>
		</view>
	</view>
</template>

<script setup>
	import { ref, computed } from 'vue'
	
	// 导出选项
	const exportOptions = ref({
		dataTypes: ['bloodSugar'],
		dateRange: 'month',
		format: 'excel',
		startDate: getDateString(-30), // 默认30天前
		endDate: getDateString(0) // 今天
	})
	
	// 是否可以导出
	const canExport = computed(() => {
		return exportOptions.value.dataTypes.length > 0
	})
	
	// 切换数据类型
	const toggleDataType = (type) => {
		const index = exportOptions.value.dataTypes.indexOf(type)
		if (index === -1) {
			exportOptions.value.dataTypes.push(type)
		} else {
			exportOptions.value.dataTypes.splice(index, 1)
		}
	}
	
	// 设置日期范围
	const setDateRange = (range) => {
		exportOptions.value.dateRange = range
		
		// 根据选择的范围设置开始和结束日期
		switch (range) {
			case 'week':
				exportOptions.value.startDate = getDateString(-7)
				break
			case 'month':
				exportOptions.value.startDate = getDateString(-30)
				break
			case 'quarter':
				exportOptions.value.startDate = getDateString(-90)
				break
			case 'year':
				exportOptions.value.startDate = getDateString(-365)
				break
			case 'custom':
				// 保持当前选择的日期
				break
		}
		
		// 结束日期始终是今天
		if (range !== 'custom') {
			exportOptions.value.endDate = getDateString(0)
		}
	}
	
	// 设置开始日期
	const setStartDate = (e) => {
		exportOptions.value.startDate = e.detail.value
	}
	
	// 设置结束日期
	const setEndDate = (e) => {
		exportOptions.value.endDate = e.detail.value
	}
	
	// 设置导出格式
	const setExportFormat = (format) => {
		exportOptions.value.format = format
	}
	
	// 获取日期字符串，days为相对于今天的天数
	function getDateString(days) {
		const date = new Date()
		date.setDate(date.getDate() + days)
		
		const year = date.getFullYear()
		const month = (date.getMonth() + 1).toString().padStart(2, '0')
		const day = date.getDate().toString().padStart(2, '0')
		
		return `${year}-${month}-${day}`
	}
	
	// 返回上一页
	const goBack = () => {
		uni.navigateBack()
	}
	
	// 导出数据
	const exportData = () => {
		// 这里应该调用API导出数据
		uni.showLoading({
			title: '正在导出...'
		})
		
		setTimeout(() => {
			uni.hideLoading()
			
			uni.showModal({
				title: '导出成功',
				content: `已成功导出${exportOptions.value.dataTypes.join('、')}数据，可在"我的文件"中查看`,
				showCancel: false,
				success: () => {
					uni.navigateBack()
				}
			})
		}, 1500)
	}
</script>

<style lang="scss">
	.data-export-container {
		min-height: 100vh;
		background-color: #f5f7fa;
		padding-bottom: 120rpx;
		
		.page-header {
			background-color: #8cc9a1;
			padding: 60rpx 30rpx 30rpx;
			
			.title {
				color: #fff;
				font-size: 36rpx;
				font-weight: bold;
			}
		}
		
		.export-options {
			padding: 20rpx;
			
			.option-group {
				background-color: #fff;
				border-radius: 12rpx;
				padding: 20rpx;
				margin-bottom: 20rpx;
				box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
				
				.group-title {
					font-size: 30rpx;
					color: #333;
					font-weight: bold;
					margin-bottom: 20rpx;
				}
				
				.option-list {
					.option-item {
						display: flex;
						align-items: center;
						padding: 20rpx 0;
						border-bottom: 1px solid #f5f5f5;
						
						&:last-child {
							border-bottom: none;
						}
						
						.checkbox, .radio {
							width: 40rpx;
							height: 40rpx;
							border: 2rpx solid #ddd;
							border-radius: 4rpx;
							margin-right: 20rpx;
							position: relative;
							
							&.checked {
								background-color: #8cc9a1;
								border-color: #8cc9a1;
								
								&:after {
									content: '';
									position: absolute;
									width: 20rpx;
									height: 10rpx;
									border-left: 4rpx solid #fff;
									border-bottom: 4rpx solid #fff;
									top: 10rpx;
									left: 8rpx;
									transform: rotate(-45deg);
								}
							}
						}
						
						.radio {
							border-radius: 50%;
							
							&.checked {
								&:after {
									content: '';
									position: absolute;
									width: 20rpx;
									height: 20rpx;
									background-color: #fff;
									border-radius: 50%;
									top: 8rpx;
									left: 8rpx;
									transform: none;
								}
							}
						}
						
						.option-label {
							font-size: 28rpx;
							color: #333;
						}
					}
				}
				
				.custom-date-range {
					margin-top: 20rpx;
					padding: 20rpx;
					background-color: #f9f9f9;
					border-radius: 8rpx;
					
					.date-picker {
						display: flex;
						align-items: center;
						margin-bottom: 20rpx;
						
						&:last-child {
							margin-bottom: 0;
						}
						
						.date-label {
							width: 160rpx;
							font-size: 28rpx;
							color: #666;
						}
						
						.picker {
							flex: 1;
							
							.picker-value {
								font-size: 28rpx;
								color: #333;
								padding: 10rpx 0;
							}
						}
					}
				}
			}
		}
		
		.export-actions {
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			display: flex;
			padding: 20rpx;
			background-color: #fff;
			box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
			
			.btn-cancel, .btn-export {
				flex: 1;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				border-radius: 40rpx;
				font-size: 30rpx;
			}
			
			.btn-cancel {
				background-color: #f0f2f5;
				color: #666;
				margin-right: 20rpx;
			}
			
			.btn-export {
				background: linear-gradient(135deg, #8cc9a1 0%, #6eb888 100%);
				color: #fff;
				
				&[disabled] {
					background: #cccccc;
					color: #ffffff;
				}
			}
		}
	}
</style> 